<script setup lang="ts">
import { getEnterpriseListAPI } from '@/apis/enterprise';
import { AddPropertybillAPI, BudgetAmountAPI, getBuildAPI, getPropertybillAPI } from '@/apis/Propertybill';
import type { Enterprise, EnterpriseListParams } from '@/types/enterprise';
import type {  AddPropertybillParams, BudgetAmountParams, BuildRes, PropertbillItem, PropertbillParams } from '@/types/Propertybill';
import type { FormInstance } from 'element-plus';
import { ref, watch } from 'vue';

const PropertyListParams = ref<PropertbillParams>({
  page: 1,
  pageSize: 5,
  end: '', // 截止时间
  start: '', // 起始时间
  enterpriseName: '', // 企业名称
});

const PropertyList = ref<PropertbillItem[]>([]);
const total = ref(0);
const getPropertybillList = async () => {
  const res = await getPropertybillAPI(PropertyListParams.value);
  PropertyList.value = res.data.rows;
  total.value = res.data.total
};

getPropertybillList();

const dateArr = ref<string[]>([])

watch(dateArr, () => {
  if (dateArr.value) {
    PropertyListParams.value.start = dateArr.value[0]
    PropertyListParams.value.end = dateArr.value[1]
  } else {
    PropertyListParams.value.start = ''
    PropertyListParams.value.end = ''
  }
}, { deep: true })

// 查询
const onSubmit = () => {
  PropertyListParams.value.page = 1
  getPropertybillList()
}

// 设置模态框默认关闭
const ModelBox = ref(false)

// 添加账单数据
const AddbillParams = ref<AddPropertybillParams>({
  buildingId: undefined, // 楼宇id
  endTime: '', // 缴费周期-结束时间
  enterpriseId: undefined, // 企业id
  paymentAmount: undefined, // 付款总额
  paymentMethod: undefined, // 付款方式1微信2支付宝3现金
  startTime: '',  //// 缴费周期-开始时间
})


const ModelBoxFalse = () => {
  ModelBox.value = false
}

const dateArrbill = ref<string[]>([])
watch(dateArrbill, () => {
  if (dateArrbill.value) {
    AddbillParams.value.startTime = dateArrbill.value[0]
    AddbillParams.value.endTime = dateArrbill.value[1]
  } else {
    AddbillParams.value.startTime = ''
    AddbillParams.value.endTime = ''

  }
}, { deep: true })

// 支付列表方式
const paymentMethodList = [
  { id: 1, label: '微信' },
  { id: 2, label: '支付宝' },
  { id: 3, label: '现金' }
]

const AddbillRules = ref({
  enterpriseId: [
    { required: true, message: '请选择企业', trigger: 'blur' },
  ],
  buildingId: [
    { required: true, message: '请选择租赁楼宇', trigger: 'blur' },
  ],
  endTime: [
    { required: true, message: '请选择缴费周期-结束时间', trigger: 'blur' },
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'blur' },
  ],
  paymentAmount: [
    { required: true, message: '请结算支付金额', trigger: 'blur' },
  ]
})

const AddbillRef = ref<FormInstance>()

const EnterpriseParams = ref<EnterpriseListParams>({
  page: 1,
  pageSize: 5,
  name: '',
})

// 获取企业列表
const exterpriseList = ref<Enterprise[]>([])
const getEnterpriseList = async () => {
  const res = await getEnterpriseListAPI(EnterpriseParams.value)
  // console.log(res);
  exterpriseList.value = res.data.rows
}
getEnterpriseList()

// 获取租赁楼宇
const BuildList = ref<BuildRes[]>([])
const getBuildList = async () => {
  const res = await getBuildAPI()
  // console.log(res);
  BuildList.value = res.data
}
getBuildList()

const Params = ref<BudgetAmountParams>({
  buildingId: 1,
  startTime: '',
  endTime:'',
})

const calculateBudgetAmount = async () => {
  if (AddbillParams.value.buildingId && AddbillParams.value.startTime && AddbillParams.value.endTime) {
    Params.value.buildingId = AddbillParams.value.buildingId
    Params.value.startTime = AddbillParams.value.startTime
    Params.value.endTime = AddbillParams.value.endTime
    const res = await BudgetAmountAPI(Params.value)
    console.log(res);
    AddbillParams.value.paymentAmount = res.data.paymentAmount
  } else {
    console.error('楼宇id、开始时间和结束时间不能为空')
  }
}

// 在选择楼宇和日期时调用
watch([() => AddbillParams.value.buildingId, () => dateArrbill.value], () => {
  if (dateArrbill.value) {
    AddbillParams.value.startTime = dateArrbill.value[0];
    AddbillParams.value.endTime = dateArrbill.value[1];
    calculateBudgetAmount();
  }
});

const Addbill =  () => {
  // 模态框打开
  ModelBox.value = true
  AddbillRef.value?.validate(async(res) => {
    if (res) {
      try {
        const res = await AddPropertybillAPI(AddbillParams.value)
        console.log(res);
        
      } catch {
        
      }

    }
  })
}


</script>

<template>
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="企业名称:">
      <el-input v-model="PropertyListParams.enterpriseName" placeholder="请输入企业名称" clearable></el-input>
    </el-form-item>
    <el-form-item label="缴费时间:">
      <el-date-picker
        v-model="dateArr"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        clearable
        >
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="Submitbutton02" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" class="Submitbutton01" @click="Addbill">添加账单</el-button>
  {{ PropertyListParams }}

  <el-table :data="PropertyList" style="width: 100%">
    <el-table-column type="index" label="序号" width="120"></el-table-column>
    <el-table-column prop="billNumber" label="账单编号"></el-table-column>
    <el-table-column prop="enterpriseName" label="企业名称"></el-table-column>
    <el-table-column prop="buildingName" label="租赁楼宇"></el-table-column>
    <el-table-column prop="propertyFeePrice" label="物业费(元/m²)"></el-table-column>
    <el-table-column prop="paymentAmount" label="账单金额(元)"></el-table-column>
    <el-table-column prop="createTime" label="缴费时间"></el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="text">查看</el-button>
        <el-button type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="ModelBox" style="width: 500px; height: 450px;">
    <template #title>
      添加账单
    </template>
    <el-form :model="AddbillParams" :rules="AddbillRules" ref="AddbillRef">
      <el-form-item label="选择租户:" prop="enterpriseId">
        <el-select placeholder="请选择租户" v-model="AddbillParams.enterpriseId" clearable>
          <el-option v-for="item in exterpriseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="租赁楼宇:" prop="buildingId">
        <el-select v-model="AddbillParams.buildingId" placeholder="请输入租赁楼宇" @change="calculateBudgetAmount">
          <el-option v-for="item in BuildList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缴费时间:" prop="endTime">
        <el-date-picker
          v-model="dateArrbill"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="支付金额:" v-model="AddbillParams.paymentAmount" prop="paymentAmount">
        <el-input placeholder="请输入支付金额" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="支付方式:" prop="paymentMethod">
        <el-select placeholder="请选择支付方式" v-model="AddbillParams.paymentMethod">
          <el-option v-for="item in paymentMethodList" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
          <div class="buttonBtn">
            <el-button @click="ModelBoxFalse">取消</el-button>
            <el-button type="primary">确认</el-button>
          </div>
      </el-form-item>
    </el-form>
    {{ AddbillParams }}
    {{ Params }}
  </el-dialog>

  <div class="pagination">
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[2,5,10,20]"
      v-model:current-page="PropertyListParams.page"
      v-model:page-size="PropertyListParams.pageSize"
      @change="getPropertybillList"
      :total="total" />
  </div>
</template>

<style scoped>
.buttonBtn{
  margin-left: 280px;
}
.demo-form-inline {
  margin-left: 20px;
  margin-top: 20px;
}
.Submitbutton01 {
  margin-left: 20px;
}
.el-table {
  margin-left: 20px;
  margin-top: 10px;
}
.el-pagination {
  margin-left: 20px;
  margin-top: 10px;
}
.pagination {
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 20px;
}
.el-form{
  padding: 25px
}
</style>

